<template>
	<div class="file-continer col" v-bind:class="{'file-continer-selected' : file.isSelected.value}" @click="onClick" @dblclick.stop='ondbClick'>
		<img class="file-img" draggable="false" :src='file.data.img' />
		<div class="file-txt" v-if="(!file.data.new && file.data.newname == '?')">{{file.data.basename}}</div>
		<div class="file-txt" v-if="(file.data.new)"><input :id='file.data.gid' @blur.stop = "file.data.create()" @keypress.esc="l('pl')" @keypress.enter.stop="file.data.create()" style="max-width: 90px;" v-model="file.data.basename" /></div>
		<div class="file-txt" v-if="(file.data.newname && file.data.newname != '?')">
			<input ref='rename' spellcheck="false"  @blur.stop = "file.rename && file.rename(file.data)" @keydown.enter.stop="file.rename && file.rename(file.data)" style="max-width: 90px;" v-model="file.data.newname" /></div>
	</div>
</template>

<script>
	{
		name: 'file',
		props: ['file'],
		data: function() {
			return {
				w: wnds
			}
		},
		watch:{
			'file':function(n,o){				
				this.file.el = this.$el
				if(this.file.data.new){
					var inp = document.getElementById(this.file.data.gid)					
					inp.select()
				}			
			},
			'file.data.newname':function(n,o){				
				if(n != this.file.data.basename){return}
				var that = this
				Vue.nextTick(function(){
					that.$refs.rename && that.$refs.rename.select()	
				})
				
			}
		},
		methods: {
			onClick: function(e) {
				if(e.ctrlKey) {
					this.w.selector.addin(this.file)
				} else {
					this.w.selector.add(this.file)
				}
			},
			ondbClick: function() {				
				if(this.file.data.type == 'folder') {					
					this.w.files.into(this.file.data.basename)
				} else {
					wnds.defaultOptions.glob.onClicked()
				}
			},
			onCancel:function(e){
				l(e)
			}
		},
		created:function(){
			var that = this
			Vue.nextTick(function(){
				that.file.el = that.$el
		
				if(that.file.data.new){
					var inp = document.getElementById(that.file.data.gid)
					
					inp.select()
				}
				
			})
			
		}
	}
</script>

<style>
	.file-continer {
		width: 90px;
		height: auto;
		margin: 10px;
		justify-content: flex-start;
		background: rgba(0, 0, 0, 0);
		border-radius: 5px;
		padding: 3px;
		animation: appare 0.5s;
	}
	
	@keyframes appare {
		from {
			background: rgba(0, 0, 0, 0.1);
		}
		to {
			background: rgba(0, 0, 0, 0);
		}
	}
	
	.file-continer:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	
	.file-continer-selected {
		background: rgba(0, 0, 0, 0.1);
	}
	
	.file-img {
		width: 70px;
		height: 70px;
		margin: 1px;
	}
	
	.file-txt {
		padding: 3px;
		font-size: small;
		word-break: break-word;
		text-align: center;
	}
</style>